<!--
 * @Author: Vi卡农
 * @Date: 2020-04-21 18:12:46
 * @LastEditTime: 2020-05-14 18:05:01
 * @Description: -意向单详情页-
 * @FilePath: \cshf_admin\src\views\modules\intention\page\intentionLease.vue
 -->
<template>
  <div class="intentionLease" v-loading="loading">
    <div class="HomeLease_infoBox">
      <span class="card_title">基本信息</span>
      <span class="signType1">{{
        $getDictLabel("houseTransactionType", dataForm.transactionType)
      }}</span>
      <el-tag size="small" style="margin-left: 10px">{{
        $getDictLabel("dictType", dataForm.type)
      }}</el-tag>

      <ul class="cont_ul">
        <li class="list_background">
          <div>
            <span>楼盘：</span>
            <span>{{ dataForm.dictName }}</span>
          </div>
          <div>
            <span>房源编号：</span>
            <el-button
              style="color: #3e8ef7"
              type="text"
              @click="
                goHouse(
                  dataForm.houseId,
                  dataForm.transactionType,
                  dataForm.type
                )
              "
              >{{ "FY-" + dataForm.houseId }}</el-button
            >
          </div>
          <div>
            <span>客源编号：</span>
            <el-button
              style="color: #3e8ef7"
              type="text"
              @click="goCustomer(dataForm.customerId, dataForm.customerType)"
              >{{ "KY-" + dataForm.customerId }}</el-button
            >
          </div>
          <div>
            <span>状态：</span>
            <span>{{ $getDictLabel("intentionState", dataForm.state) }}</span>
          </div>
        </li>

        <li>
          <div>
            <span>面积：</span>
            <span>{{ dataForm.area }}㎡</span>
          </div>
          <div>
            <span>单价：</span>
            <span>{{ dataForm.price }}</span>
          </div>
          <div>
            <span>总价：</span>
            <span>{{ dataForm.pirces }}</span>
          </div>
          <div>
            <span>税收：</span>
            <span>{{ $getDictLabel("houseTaxation", dataForm.taxation) }}</span>
          </div>
        </li>

        <li class="list_background">
          <div>
            <span>装修：</span>
            <span>{{
              $getDictLabel("dictRenovation", dataForm.renovation)
            }}</span>
          </div>
          <div>
            <span>免租期：</span>
            <span>{{ dataForm.tenanFreeTime }} 天</span>
          </div>
          <div>
            <span>递增：</span>
            <span>{{ dataForm.increase }}</span>
          </div>
          <div>
            <span>合同年限：</span>
            <span>{{ dataForm.tenanTime }}</span>
          </div>
        </li>

        <li>
          <div>
            <span>付款方式：</span>
            <span v-if="dataForm.transactionType == '0'">{{
              $getDictLabel("dictOwnerBuy", dataForm.payType)
            }}</span>
            <span v-else>{{
              $getDictLabel("dictTenanPay", dataForm.tenanPay)
            }}</span>
          </div>
          <div>
            <span>发票：</span>
            <span>{{ dataForm.buyBill == "0" ? "没有" : "有" }}</span>
          </div>
          <div>
            <span>业主方：</span>
            <span>{{ dataForm.ownerName }}</span>
          </div>
          <div>
            <span>客户方：</span>
            <span>{{ dataForm.customerName }}</span>
          </div>
        </li>

        <li class="list_background">
          <div>
            <span>签约时间：</span>
            <span>{{ dataForm.signingData }}</span>
          </div>
          <div>
            <span>合同佣金：</span>
            <span>{{ dataForm.commission }} 元</span>
          </div>
          <div>
            <span>外佣：</span>
            <span>{{ dataForm.externalCommission }} 元</span>
          </div>
          <div>
            <!-- <span>平台佣金：</span>
            <span>{{dataForm.platformCommission}} 元</span>
            <el-divider direction="vertical"></el-divider>-->
            <span>业绩佣金：</span>
            <span>{{ dataForm.achievementCommission }} 元</span>
          </div>
        </li>
        <!-- <li> -->

        <!-- </li> -->
      </ul>
      <div class="w100 cont_conf">
        <span class="cont_conf_title">家具列表：</span>
        <div class="cont_conf_list">
          <el-checkbox-group v-model="confList" disabled>
            <el-checkbox
              :label="item.dictValue"
              v-for="(item, index) in $getDictDataList('dictConf')"
              :key="index"
              >{{ item.dictLabel }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="box_shadow" style="margin: 20px 5px">
      <span class="card_title">备注：</span>
      <span class="display_i_b" style="margin-left: 10px">{{
        dataForm.remark
      }}</span>
    </div>
    <div class="HomeLease_infoBox">
      <span class="card_title">佣金分配</span>
      <span class="float_r" style="margin: 15px">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="small"
          plain
          @click="updateCommission"
          >修改</el-button
        >
      </span>
      <ul class="Commission_ul">
        <li v-for="item in commissionList">
          <div class="list_background">{{ item.dictLabel }}</div>
          <div>{{ item.userName }}</div>
          <div>{{ item.commissionRatio }}</div>
          <div class="list_background">{{ item.commission }} 元</div>
        </li>
      </ul>
    </div>

    <div class="Follow_main box_shadow" style="margin: 5px 5px">
      <div>
        <span class="card_title">跟进记录</span>
        <span class="float_r" style="margin: 15px">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            plain
            @click="addFollowFun"
            >写跟进</el-button
          >
        </span>
      </div>
      <div class="Follow_List">
        <ul>
          <li v-for="item in FollowTableData">
            <el-avatar
              :size="45"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            ></el-avatar>
            <span class="display_i_b content_text">
              {{ item.creatorName }}
              <br />
              {{ item.content }}
            </span>
            <span class="float_r type"
              >方式：
              {{ $getDictLabel("IntentionFollowType", item.type) }}</span
            >
            <span class="float_r date">{{ item.createDate }}</span>
          </li>
        </ul>
      </div>
      <el-pagination
        :current-page="page2"
        :page-size="limit2"
        :total="total2"
        layout="total, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle2"
        @current-change="pageCurrentChangeHandle2"
      ></el-pagination>
    </div>

    <el-dialog title="写跟进" :visible.sync="addFollowVisible" width="30%">
      <el-form
        ref="form"
        :model="FollowForm"
        label-width="50px"
        label-position="top"
      >
        <el-form-item label="跟进方式">
          <ren-select
            v-model="FollowForm.type"
            dict-type="IntentionFollowType"
            style="width: 100%"
          ></ren-select>
        </el-form-item>
        <el-form-item label="跟进内容">
          <el-input
            v-model="FollowForm.content"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFollowVisible = false">取 消</el-button>
        <el-button type="primary" @click="FollowFun" :loading="BtnLoading"
          >添加</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="修改佣金"
      :visible.sync="updateCommissionVisible"
      width="50%"
    >
      <el-form
        ref="form"
        :model="FollowForm"
        label-width="80px"
        label-position="right"
      >
        <div
          class="moreRulesIn"
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="类型" prop="ownerName">
                <el-input
                  v-model="domain.dictLabel"
                  placeholder="类型"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经纪人" prop="ownerName">
                <el-input
                  v-model="domain.userName"
                  placeholder="经纪人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="比例" prop="ownerName">
                <el-input
                  v-model="domain.commissionRatio"
                  placeholder="比例"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="金额" prop="ownerName">
                <el-input v-model="domain.commission" placeholder="金额"
                  ><template slot="append">元</template></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-button type="danger" icon="el-icon-delete"  @click.prevent="removeDomain(domain)"></el-button>       
            </el-col>
          </el-row>

          <!-- <el-select v-model="dataForm.furniture" class="FormSelect" clearable>
            <el-option label="没有" value="0"></el-option>
            <el-option label="有" value="1"></el-option>
          </el-select> -->
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="updateCommissionVisible = false">取 消</el-button>
        <el-button @click="addDomain">增加</el-button>
        <el-button type="primary" @click="FollowFun1" :loading="BtnLoading" >添加</el-button >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      loading: true,
      dataForm: {
        transactionType: "",
      },
      confList: [],
      commissionList: [],
      FollowTableData: [],
      page2: 1, // 当前页码
      limit2: 5, // 每页数
      total2: 0, // 总条数
      FollowForm: {},
      addFollowVisible: false,
      BtnLoading: false,
      updateCommissionVisible: false,
      dynamicValidateForm: {
        domains: [],
      },
    };
  },
  props: ["intentionId"],
  created() {
    if (this.intentionId) {
      this.getIntention();
      this.getcommission();
      this.getPageFollow();
    }
  },
  methods: {
    getIntention() {
      let _this = this;
      this.$http
        .get("/intention/intentioninfo/" + _this.intentionId)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.dataForm = res.data;
          if (res.data.conf) {
            _this.confList = res.data.conf.split(",");
          } else {
            _this.confList = [];
          }
          _this.loading = false;
        })
        .catch(() => {});
    },
    //获取佣金
    getcommission() {
      let _this = this;
      this.$http
        .get("/intention/intentioninfo/commission", {
          params: {
            intentionId: _this.intentionId,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.commissionList = res.data;
          _this.dynamicValidateForm.domains = res.data;
        })
        .catch(() => {});
    },
    //跳转到列表页
    goHouse(ID, transactionType, type) {
      this.$router.push({
        name: "HousingPages",
        query: {
          ID: ID,
          transactionType: transactionType,
          type: type,
        },
      });
    },
    goCustomer(ID, customerType) {
      this.$router.push({
        name: "customerPage",
        query: {
          ID: ID,
          customerType: customerType,
        },
      });
    },

    //获取跟进记录
    getPageFollow() {
      let _this = this;
      this.$http
        .get(`/intention/intentioninfo/pageFollow`, {
          params: {
            page: _this.page2,
            limit: _this.limit2,
            id: _this.intentionId,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.FollowTableData = res.data.list;
          _this.total2 = res.data.total;
        })
        .catch(() => {});
    },
    // 分页, 每页条数
    pageSizeChangeHandle2(val) {
      this.page2 = 1;
      this.limit2 = val;
      this.getPageFollow();
    },
    // 分页, 当前页
    pageCurrentChangeHandle2(val) {
      this.page2 = val;
      this.getPageFollow();
    },

    //写跟进
    addFollowFun() {
      this.FollowForm = {
        content: "",
        type: "",
        intId: this.intentionId,
      };
      this.addFollowVisible = true;
    },
    //确定添加跟进
    FollowFun() {
      let _this = this;
      this.$http
        .post("/intention/intentioninfo/saveFollow", this.FollowForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("添加跟进成功！");
          _this.getPageFollow();
          _this.addFollowVisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "添加失败",
          });
        });
    },
    //修改意向单佣金
    updateCommission() {
      this.updateCommissionVisible = true;
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
  },
  watch: {
    intentionId: {
      handler(newValue, oldValue) {
        this.getIntention();
        this.getcommission();
        this.getPageFollow();
      },
    },
  },
};
</script>